<template>
  <div class="classificationTitle">
    <div >
      <LoveNewsList @backto="backto" :class="{displayShow:!isShowLove}" @newlists="newlist"
                    :classificationTitle="classificationTitle"/>
      <div v-show="!isShowLove" class="checks">
        <van-icon name="plus" class="animates" @click="isShowLove=!isShowLove"/>
      </div>
      <van-tabs :class="{displayShow:isShowLove}" v-model="active" swipeable>
        <van-tab  :title="item.name" v-for="(item) in classificationTitle" :key="item.categoryId">
          <BriefIntroduction :categoryid="item.categoryId"/>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {getCategorylistings,} from "@/api/index.api";
import BriefIntroduction from "@/views/index/components/BriefIntroduction";

import Vue from 'vue';
import {Tab, Tabs} from 'vant';
import LoveNewsList from "@/views/index/components/LoveNewsList";
import {mapState} from "vuex";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "ClassificationTitle",
  data() {
    return {
      active: 0,
      classificationTitle: [],//分类列表
      isShowLove: false,
      newLoves: []

    };
  },
  created() {
    this.active=this.selectChannel
    getCategorylistings().then(res => {
      this.classificationTitle = res.rows
    })
  },
  methods: {
    newlist(e) {
      this.newLoves = e[0]
      this.isShowLove = e[1]
      if (e) {
        this.newListLoves()
      }
    },
    newListLoves() {
      console.log(this.classificationTitle)
      this.newLoves.forEach(i => {
        console.log(i)
        this.classificationTitle = this.classificationTitle.filter(item => item.name != i)
      })
      console.log(this.classificationTitle)
    },
    backto(e) {
      this.isShowLove = e
    }
  },
  computed:{
    ...mapState(["selectChannel"])
  },
  watch:{
    active(e){
      setTimeout(()=>{
        this.$store.commit("changeChannel",{selectChannel:e})
      },100)
    }
  },
  // beforeDestroy() {
  //   setTimeout(()=>{
  //     this.$store.commit("changeChannel",{selectChannel:0})
  //   },100)
  // },
  components: {
    BriefIntroduction,
    LoveNewsList,
  },


}
</script>

<style lang="less" scoped>
.classificationTitle {
  width: 90%;
  margin: auto;
  position: relative;

  .displayShow {
    display: none;
  }
  .checks {
    opacity: 0.4;
    z-index: 1000000;
    width: 16px;
    height: 16px;
    text-align: center;
    background-color: beige;
    position: absolute;
    top: 14px;
    right: 14px;

    .van-icon van-icon-plus {
      width: 100%;
      height: 100%;
      z-index: 10000;
    }
  }
  //上部下边框颜色
  /deep/ .van-tabs__line{
    background-color: #fa946d;
  }
  /deep/ .van-tabs--line .van-tabs__wrap{
    width: 88%;
  }
}

</style>